<template>
  <div class="file-import">
    <el-upload :action="fullAction" multiple :file-list="fileList" :list-type="'text'" :data="fileData" :on-progress="handleProgress" :on-success="handleSuccess" :on-error="handleError" :show-file-list="false">
      <el-button size="small" icon="el-icon-upload" type="primary">
        {{
        text
        }}
      </el-button>
    </el-upload>
  </div>
</template>
<script>
export default {
  name: "fileImport",
  data() {
    return {
      fullAction: "",
      fileList: [],
      loading: "",
      baseUrl: process.env.VUE_APP_DOWNLOAD_URL
    };
  },
  props: {
    action: String,
    fileData: {},
    text: {
      default: "点击上传"
    }
  },
  watch: {},
  methods: {
    handleProgress() {
      this.loading = this.$loading({
        lock: true,
        text: "文件上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    handleSuccess(res, file, fileList) {
      this.loading.close();
      if (res.success) {
        this.$message({
          message: "上传成功",
          type: "success"
        });
      } else {
        this.$message({
          message: res.msg || "上传失败"
        });
        fileList.splice(fileList.length - 1, 1);
        return;
      }
      this.$emit("query");
    },
    // eslint-disable-next-line handle-callback-err
    handleError(err, file, fileList) {
      this.loading.close();
      // fileList.splice(fileList.length - 1, 1);
      this.$message.error("上传失败");
    }
  },
  mounted() {
    this.fullAction = process.env.VUE_APP_BASE_URL + this.action;
    // this.fileList = JSON.parse(JSON.stringify(this.value));
  }
};
</script>
<style lang="scss">
.file-import {
  .el-button,
  .el-button--primary,
  .el-button--medium {
    background-color: #00b09e;
    border: 1px #00b09e solid;
  }
}
</style>
